<template>
  <div class="my-dialog-wrapper">
    <el-dialog
      title="外层 Dialog"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="outerVisible"
    >
      <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
        <div slot="footer" class="inner-dialog-footer">
          <el-button @click="innerClose">取 消</el-button>
          <el-button type="primary" @click="innerSure">确 定</el-button>
        </div>
      </el-dialog>

      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model="form.gender"></el-input>
        </el-form-item>
        <el-form-item label="age" prop="age">
          <el-input v-model="form.age"></el-input>
        </el-form-item>

        <el-form-item label="address" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="birthday" prop="birthday">
          <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="outerClose">取 消</el-button>
        <el-button type="primary" @click="outerSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
// 封装组件  props  事件
export default {
  props: {
    outerVisible: {
      type: Boolean,
      default: false
    },
    innerVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        username: "",
        gender: 1,
        age: 1,
        address: "",
        birthday: ""
      }
    };
  },
  created() {},
  methods: {
    //子 告 父
    outerClose() {
      this.$emit("outerClose");
    },
    outerSure() {
      this.$emit("outerSure");
    },
    innerClose() {
      this.$emit("innerClose");
    },
    innerSure() {
      this.form.birthday = moment(this.form.birthday).format("YYYY-M-D");
      // console.log(this.form, "form");
      this.$emit("innerSure", this.form);
    }
  }
};
</script>